<template>
  <div class="map-monitor-alarm-area-panel bg-white-6 absolute-top full-height">
    <q-scroll-area class="fit">
      <div class="sticky-top bg-grey-1 text-body1 text-grey-9 q-pa-md">
        {{ $t('MapCore.RealTimeAlarmArea') }}
        <template v-if="data.length">
          <q-btn class="q-ml-md" color="negative" dense flat padding="0" @click="stopAudio">
            {{ $t('AGVCore.StopAlarm') }}
          </q-btn>
        </template>
      </div>
      <template v-for="row in data || []" :key="row.areaCode">
        <q-separator class="q-mx-sm q-my-xs"></q-separator>
        <q-item v-ripple class="rounded-borders bg-grey-2 text-black q-pa-sm" clickable @click.stop="focusArea(row)">
          <q-item-section>
            <q-item-label>{{ row.areaName }}</q-item-label>
            <q-item-label caption class="text-negative">
              <template v-if="row.ruleInfo?.congestionType === '1'">
                {{ $t('AGVCore.AlarmRuleTip3', [row.ruleInfo?.agvSum || 0, row.ruleInfo?.warnTime || 0]) }}
              </template>
              <template v-else>
                {{ $t('AGVCore.AlarmRuleTip4', [row.ruleInfo?.agvSum || 0, row.ruleInfo?.warnTime || 0]) }}
              </template>
            </q-item-label>
          </q-item-section>
        </q-item>
      </template>
      <MEmpty v-if="!data?.length"></MEmpty>
    </q-scroll-area>
    <div class="map-monitor-shrink absolute bg-grey-2 row justify-center items-center cursor-pointer cursor-hover"
      @click.stop="handleShrink">
      <q-icon :class="expand ? 'rotate-180' : ''" color="grey-6" name="double_arrow" size="1.2rem"></q-icon>
      <q-tooltip anchor="bottom end" self="top left" v-bind="$tooltipAttr" v-bind:offset="[-25, 5]">
        <div class="text-no-wrap q-pa-xs">{{ $t('MapCore.RealTimeAlarmArea') }}</div>
      </q-tooltip>
    </div>
  </div>
</template>

<script setup>
import { useTimeout } from 'quasar'
import { exportAttrs } from 'src/views/MapCore/MapGlobal/utils/KonvaEvent.js'
import { initZoomCanvas } from 'src/views/MapCore/MapGlobal/utils/MouseEvent.js'
import { stopAudio } from 'src/views/MapCore/MapGlobal/utils/utils.mqtt.js'
import { inject, onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({ data: { type: Array, default: () => [] } })
const isXS = inject('isXS')
const expand = ref(false)

const { registerTimeout, removeTimeout } = useTimeout()
onMounted(() => {
  registerTimeout(() => {
    expand.value = props.data.length && !isXS.value
  }, 100)
})
watch(props.data, (val, oldValue) => {
  if (isXS.value) return
  if (val.length && !oldValue.length) expand.value = true
})
onUnmounted(() => removeTimeout && removeTimeout())
const handleShrink = () => (expand.value = !expand.value)
const focusArea = area => {
  const { CANVAS } = exportAttrs(), { areaX = 0, areaY = 0, areaWidth = 0, areaHeight = 0 } = area
  const minX = Number(areaX), maxY = Number(areaY), maxX = minX + Number(areaWidth), minY = maxY + Number(areaHeight)
  initZoomCanvas(CANVAS, { minX, minY, maxX, maxY }, 'mini')
}
</script>
<style lang="scss" scoped>
.map-monitor-alarm-area-panel {
  width: 20rem;
  left: v-bind('`${expand ? "0rem" : "-20rem"}`');
}

.q-scrollarea {
  padding-bottom: 1.5rem;
}

.q-item__label {
  min-height: 1rem;
}

.map-monitor-shrink {
  right: -1.25rem;
}
</style>